<template>
  <div class="detail">
    <el-scrollbar height="98vh" @scroll="handleScroll" ref='scrollbarRef'>
      <h1>{{ title }}</h1>
      <div v-html="content" class="ck-content"></div>
      <svg class="icon btn" aria-hidden="true" v-if="isshowdong" @click="handleTop">
          <use xlink:href="#icon-fanhuidingbu"></use>
      </svg>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useHomeStore } from "@/stores/home";
import URL from "@/api/url";
import axios from "axios";
const route = useRoute();
const store = useHomeStore();
const content = ref("");
const title = ref("");
const scrollbarRef = ref()
const currentScrollbarHeight = ref(0)
const isshowdong = ref(false)
onMounted(() => {
  axios
    .get(URL() + `/article/checkArticleId/${route.query.id}`)
    .then((item) => {
      const a = item.data.data.filter((item) => item._id === route.query.id);
      content.value = a[0].content;
      title.value = a[0].title;
    });
    
});
const handleScroll =(a)=>{
  // console.log(a);
  // handleclick(a)
  currentScrollbarHeight.value = a.scrollTop
  if(a.scrollTop === 0){
      isshowdong.value = false
    }else{
      isshowdong.value = true
    }
}
const handleTop = (a)=>{
  // 500 / 10 =  50每次滚动减少的值
  //  500 - 50 = 450 第一次滚动的值  450 - 50 = 400 第二次滚动的值...
  let tempHeight = currentScrollbarHeight.value  // 总高度
  let perDecrementHeight = tempHeight / 60  // 每次减少高度
  let timer = setInterval(() => {
    tempHeight -= perDecrementHeight
    // 如果小于等于0，就滚动到0，并且清楚定时器
    if (tempHeight <= 0) {
      scrollbarRef.value.setScrollTop(0)
      clearInterval(timer)
      return
    }
    // 否则就减少n个单位
    scrollbarRef.value.setScrollTop(tempHeight)
  }, 300 / 60)  // 16.6666667
}
</script>

<style lang="scss" scoped>
.detail {
  margin-bottom: 20px;

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  .btn{
    cursor: pointer;
    position: fixed;
    right: 50px;
    bottom: 20px;
    // transition: 10s;
  }
  .btntop{
    position: fixed;
    right: 50px;
    top:0;
  }

  .icon{
    width: 35px;
    height: 35px;
  }
}
</style>